<template>
  <div class="songs">
    <MusicSearch />
    
    <keep-alive>
      <van-tabs v-model="active" background="#fff" title-inactive-color="#111" title-active-color="#11bf72" color="#11bf72"  line-width="34px" sticky offset-top="54" swipeable animated>
        <van-tab title="全部"><MusicAllsingers :artists="artists" />
        </van-tab>
        <van-tab title="内地"><MusicChinese /></van-tab>
        <van-tab title="欧美"><MusicEurope /></van-tab>
        <van-tab title="日本"><MusicJapanese /></van-tab>
        <van-tab title="韩国"><MusicKorea /></van-tab>
        <van-tab title="其他"><MusicElse /></van-tab>
      </van-tabs>
    </keep-alive>
  </div>
</template>

<script>
import MusicSearch from "../home/search.vue";
import MusicAllsingers from "./allsingers.vue";
import MusicChinese from "./Chinese.vue";
import MusicEurope from "./Europe.vue";
import MusicJapanese from "./Japanese.vue";
import MusicKorea from "./Korea.vue";
import MusicElse from "./else.vue";
export default {
  name: "MusicSingers",
  props: ["artists"],

  components: {
    MusicSearch,
    MusicAllsingers,
    MusicChinese,
    MusicEurope,
    MusicJapanese,
    MusicKorea,
    MusicElse,
  },
  data() {
    return {
      active: 0,
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>

</style>